<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开标情况记录表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #f5f5f5;
        }
        .modal-container {
            width: 100%;
            min-height: 100vh;
            position: relative;
        }
        .modal-header {
            background-color: #005bac;
            color: white;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-header h3 {
            font-size: 16px;
            font-weight: normal;
        }
        .close-btn {
            color: white;
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
        }
        .modal-title {
            text-align: center;
            font-size: 24px;
            margin: 20px 0;
        }
        .bid-table {
            width: 95%;
            margin: 0 auto;
            border-collapse: collapse;
            border: 1px solid #e6e6e6;
        }
        .bid-table th,
        .bid-table td {
            border: 1px solid #e6e6e6;
            padding: 10px;
            text-align: center;
        }
        .bid-table th {
            background-color: #f2f7fc;
            font-weight: normal;
        }
        .bid-table tr:nth-child(even) {
            background-color: #fafafa;
        }
        .footer-navigation {
            position: fixed;
            bottom: 10px;
            right: 20px;
        }
        .footer-navigation button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="modal-container">
        <div class="modal-header">
            <h3>公告信息</h3>
            <button class="close-btn" onclick="window.close()">×</button>
        </div>
        
        <h2 class="modal-title">开标情况记录表</h2>
        
        <table class="bid-table">
            <thead>
                <tr>
                    <th width="8%">序号</th>
                    <th width="25%">投标单位名称</th>
                    <th width="15%">总价</th>
                    <th width="15%">总分</th>
                    <th width="20%">交货地点</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        
        <div class="footer-navigation">
            <button onclick="history.back()">←</button>
        </div>
    </div>

    <script>
        // 获取URL参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        
        // 页面加载时根据项目ID获取开标情况数据
        window.onload = function() {
            var projectId = getUrlParam('id');
            // 这里可以添加根据projectId获取数据的逻辑
            console.log("加载项目ID：" + projectId + " 的开标情况");
            
            // 模拟数据，实际项目中应该通过API获取
            if (projectId === 'PRJ20220001') {
                // 可以在这里设置表格数据
                document.querySelector('tbody tr:nth-child(1) td:nth-child(2)').textContent = '北京科技信息有限公司';
                document.querySelector('tbody tr:nth-child(1) td:nth-child(3)').textContent = '1258000元';
                document.querySelector('tbody tr:nth-child(1) td:nth-child(4)').textContent = '95';
                document.querySelector('tbody tr:nth-child(1) td:nth-child(5)').textContent = '北京市海淀区';
                document.querySelector('tbody tr:nth-child(1) td:nth-child(6)').textContent = '中标';
                
                document.querySelector('tbody tr:nth-child(2) td:nth-child(2)').textContent = '天津信息技术有限公司';
                document.querySelector('tbody tr:nth-child(2) td:nth-child(3)').textContent = '1320000元';
                document.querySelector('tbody tr:nth-child(2) td:nth-child(4)').textContent = '88';
                document.querySelector('tbody tr:nth-child(2) td:nth-child(5)').textContent = '北京市海淀区';
                
                document.querySelector('tbody tr:nth-child(3) td:nth-child(2)').textContent = '上海智慧科技有限公司';
                document.querySelector('tbody tr:nth-child(3) td:nth-child(3)').textContent = '1295000元';
                document.querySelector('tbody tr:nth-child(3) td:nth-child(4)').textContent = '82';
                document.querySelector('tbody tr:nth-child(3) td:nth-child(5)').textContent = '北京市海淀区';
            }
        };
    </script>
</body>
</html>
